<template>
    <view class="box">
        <p>输入充值金额</p>
        <text>￥</text>
        <input v-model="money" type="number"/>
        <hr>
        <button @click="free">充值</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                money: '',
            };
        },
        methods:{
            free() {
                if(!this.$u.test.amount(this.money)) {
                    uni.showToast({
                        title: '请输入正确金额',
                        duration: 1000,
                        icon: 'none'
                    });
                    return ;
                } else {
                    this._postUserOrderPay();    
                }
            },
            _postUserOrderPay() {            
                this.$u.api.postUserOrderPay({
                    ids: '11',
                    payment_code: 'wechatpay',
                    payment_type: '2',
                    params: {
                        money: this.money,
                        return_url: '/homepage/Test/Home/myhome/Recharge_result',
                        trade_type: 'JSAPI'
                    }
                }).then(res => {
                        uni.requestPayment({
                            provider: 'wxpay',
                            timeStamp: res.timeStamp,
                            nonceStr: res.nonceStr,
                            package: res.package,
                            signType: res.signType,
                            paySign: res.paySign,
                            success: (wxres) => {
                                // uni.showToast({
                                //     title: '支付成功',
                                //     duration: 1000
                                // });
                                uni.navigateTo({
                                    url: "Recharge_result"
                                })
                            },
                            fail: (wxerr) => {
                                uni.showToast({
                                    title: '支付失败',
                                    duration: 1000,
                                    icon: 'none'
                                });
                            }
                        })
                }).catch(err => {
                    uni.showToast({
                        title: err.msg,
                        duration: 1000,
                        icon: 'none',
                    });
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
    .box {
        margin: 125rpx 150rpx;
    }

    input {
        position: relative;
        top: -50rpx;
        left: 60rpx;
        width: 300rpx;
    }

    hr {
        margin-top: -40rpx;
        width: 450rpx;
        height: 4rpx;
        background-color: #000000;
    }

    p {
        margin-bottom: 35rpx;
        font-size: 24rpx;
        color: #191919;
    }

    text {
        font-size: 50rpx;
        color: #191919;
    }

    button {
        background-color: #1bc078;
        border-radius: 49rpx;
        margin-top: 100rpx;
        color: #FFFFFF
    }
</style>
